import React, { Component } from 'react'
import connect from '../../../store/connect'
import swiper from 'swiper/swiper-bundle'
import 'swiper/swiper-bundle.css'
import './Succulent.scss'
import Swiper from 'components/Swiper'
import {withRouter} from 'react-router-dom'

class Succulent extends Component {
    constructor(){
        super();
        this.state={
            activeIndex:0
        }
    }
    render() {
        return (
            <>
            <div className="swiper-container">
                <div className="swiper-wrapper">
                    <div className="swiper-slide">
                        <a href={this.props.succulent&&this.props.succulent.banner_list&&this.props.succulent.banner_list.list[0].link}>
                            <img src={this.props.succulent&&this.props.succulent.banner_list&&this.props.succulent.banner_list.list[0].img_url} alt=""/>
                        </a>
                    </div>
                    <div className="swiper-slide">
                        <a href={this.props.succulent&&this.props.succulent.banner_list&&this.props.succulent.banner_list.list[1].link}>
                            <img src={this.props.succulent&&this.props.succulent.banner_list&&this.props.succulent.banner_list.list[1].img_url} alt=""/>
                        </a>
                    </div>
                    <div className="swiper-slide">
                        <a href={this.props.succulent&&this.props.succulent.banner_list&&this.props.succulent.banner_list.list[2].link}>
                            <img src={this.props.succulent&&this.props.succulent.banner_list&&this.props.succulent.banner_list.list[2].img_url} alt=""/>
                        </a>
                    </div>
                    <div className="swiper-slide">
                        <a href={this.props.succulent&&this.props.succulent.banner_list&&this.props.succulent.banner_list.list[3].link}>
                            <img src={this.props.succulent&&this.props.succulent.banner_list&&this.props.succulent.banner_list.list[3].img_url} alt=""/>
                        </a>
                    </div>
                    <div className="swiper-slide">
                        <a href={this.props.succulent&&this.props.succulent.banner_list&&this.props.succulent.banner_list.list[4].link}>
                            <img src={this.props.succulent&&this.props.succulent.banner_list&&this.props.succulent.banner_list.list[4].img_url} alt=""/>
                        </a>
                    </div>
                    {/* <div style={{background:"red"}} className="swiper-slide">1</div>
                    <div style={{background:"blue"}} className="swiper-slide">2</div>
                    <div style={{background:"green"}} className="swiper-slide">3</div> */}
                </div>
                <div className="swiper-pagination"></div>
            </div>
            <div className="classify">
                {
                    this.props.succulent&&this.props.succulent.cate&&this.props.succulent.cate.cus_cate.map((item,index)=>{
                        return (
                            <div key={index}>
                                <img src={item.img_url} alt=""/>
                                <p>{item.title}</p>
                            </div>
                        )
                    })
                }
            </div>
            <div style={{height:"0.15rem",background:"#F4F4F4"}}></div>
            <div className="products">
                <ul>
                    {
                        this.props.succulent&&this.props.succulent.cate&&this.props.succulent.cate.hot_cate.map((item,index)=>{
                            return (
                                <li className={this.state.activeIndex===index?"active":""} onClick={()=>{this.setState({activeIndex:index})}} key={index}>{item.title}</li>
                            )
                        })
                    }
                </ul>
                <Swiper list={this.props.succulent&&this.props.succulent.cate&&this.props.succulent.cate.hot_cate[this.state.activeIndex]}></Swiper>
            </div>
            <div style={{height:"0.15rem",background:"#F4F4F4"}}></div>
            <div className="plants">
                <img src="https://oss.flowerplus.cn/oss_png/2019-10-18/15713837363163.png" alt=""/>
            </div>
            <div className="sample">
                <img src="https://oss.flowerplus.cn/oss_jpg/2019-10-31/15725115968740.jpg!60" alt=""/>
                <div style={{padding:"0 4%"}}>
                    <Swiper list={this.props.succulent&&this.props.succulent.lvzhi&&this.props.succulent.lvzhi.md}></Swiper>
                </div>
                <img src="https://oss.flowerplus.cn/oss_jpg/2019-10-18/15713837369581.jpg!60" alt=""/>
                <div style={{padding:"0 4%"}}>
                    <Swiper list={this.props.succulent&&this.props.succulent.lvzhi&&this.props.succulent.lvzhi.sm}></Swiper>
                </div>
            </div>
            <div className="footbar">
                <span>©2013-2020 上海分尚网络科技有限公司</span>
            </div>
            <div onClick={()=>this.props.history.push("/search")}>
                <img style={{position:"absolute",width:"0.4rem",right:"0",bottom:"1.4rem"}} src="https://oss.flowerplus.cn/oss_png/2020-07-02/15936548578992.png" alt=""/>
            </div>
            </>
        )
    }
    componentDidMount() {
        this.props.succulentdata()
        new swiper('.swiper-container', {
            autoplay:{
                delay: 3000,
                disableOnInteraction: false,
            },
            slidesPerView : 1.2,
            centeredSlides : true,
            spaceBetween : 10,
            loop: true, // 循环模式选项
            // history: true,
            
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            }
        });
    }
}
export default connect(withRouter(Succulent))